<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todolist</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box_1 {
        background-color: #0b87ff;
        text-align: center;
        padding: 5px 0px 10px 0px;
        color: aliceblue;
      }
      .box_11 {
        margin-top: 10px;
        display: flex;
        gap: 5px;
        justify-content: center;
      }
      .thing {
        width: 300px;
        height: 30px;
        padding: 0 10px;
        border-radius: 3px;
        outline: none; /* 移除输入框获得焦点时的默认外边框样式 */
        border: solid 1px white;
      }
      .add {
        display: inline-block;
        width: 80px;
        height: 30px;
        background-color: aliceblue;
        color: #0b87ff;
        line-height: 30px;
        border: none;
        border-radius: 3px;
      }
      .add:hover {
        cursor: pointer;
        background-color: aliceblue;
        color: red;
      }
      ul li {
        list-style: none;
        position: relative;
        padding-left: 40px;
        height: 40px;
        line-height: 40px;
      }

      /* 将所有奇数列表项设置为不同的颜色(班马线) */
      ul li:nth-child(odd) {
        background-color: #f9f9f9;
      }

      /* 光标移入时变暗 */
      ul li:hover {
        cursor: pointer;
        background-color: #ddd;
      }

      /* 单击时,添加背景颜色并删除文本 */
      ul li.check {
        background-color: #888;
        text-decoration: line-through;
        color: #f9f9f9;
      }

      /* 单击时添加"已选中"标记 */
      ul li.check::before {
        content: '';
        position: absolute;
        border-color: #fff;
        border-style: solid;
        border-width: 0 2px 2px 0;
        top: 10px;
        left: 16px;

        transform: rotate(45deg);
        height: 15px;
        width: 7px;
      }

      /* 设置关闭按钮样式 */
      .close {
        position: absolute;
        right: 0px;
        top: 0px;
        padding: 0px 20px;
        font-size: 16px;
      }

      .close:hover {
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="box_1">
      <h2>My ToDoList</h2>
      <div class="box_11">
        <input type="text" placeholder="请输入待办事项..." class="thing" />
        <button class="add">添加</button>
      </div>
    </div>
    <div class="box_2">
      <ul>
        <li>吃饭<span class="close">×</span></li>
        <li class="check">睡觉<span class="close">×</span></li>
      </ul>
    </div>
    <script>
      //获取相关的dom元素
      const addBtn = document.querySelector('.add');
      const input = document.querySelector('.thing');
      const ul = document.querySelector('ul');

      //监听addBtn的点击
      addBtn.addEventListener('click', function () {
        //获取文本框中的内容
        const value = input.value;

        //创建li元素,将文本框的内容填充进去
        const li = document.createElement('li');
        li.innerHTML = value;

        //给li添加点击事件,点击的时候切换样式
        li.addEventListener('click', function () {
          // 使用 classList.toggle() 方法切换 'check' 类
          // 如果元素当前有 'check' 类，则移除它；如果没有，则添加它
          // 这样可以实现点击时切换选中状态的效果
          this.classList.toggle('check');
        });

        //给li添加删除按钮(创建span标签,并且绑定删除事件)
        const span = document.createElement('span');
        span.innerHTML = '×';
        span.classList.add('close');
        li.appendChild(span);
        span.addEventListener('click', function (e) {
          //一定要阻止事件冒泡(点击删除的时候,会冒泡到父类,会触发li的切换样式操作)
          e.stopPropagation(); // 阻止事件冒泡，防止点击删除按钮时触发父元素li的点击事件

          //通过span找到ul所在的父类
          const father = span.parentNode.parentNode;
          //在通过span找到它当前所在的li
          const son = span.parentNode; // 获取span元素的父节点，即当前要删除的li元素

          //调用删除方法
          father.removeChild(son);
          //   father.appendChild(son); 弄错删除命令了
        });

        //将li添加ul下面
        ul.appendChild(li);

        //添加完成之后,在清除input中的内容
        input.value = '';
      });
    </script>
  </body>
</html>
